<template>
  <view class="container_page">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions"></action-bar>

    <view class="card">

      <view class="header">
        <image class="decorate" :src="baseImgUrl + '/login/home_decorate.png'"></image>
      </view>

      <view class="main">
        <view class="btn" @click="toPage('agencyRegister')">消防技术服务机构信息注册</view>
        <view class="btn" @click="toPage('socialRegister')">社会单位信息注册</view>
        <!-- <view class="btn" @click="toPage('binding')">关联已有账号</view> -->
        <view class="btn" @click="toPage('login')">消防救援机构登录</view>
      </view>

      <!-- <view class="footer" @click="toPage('binding')">已有账号？
        <view>立即绑定</view>
      </view> -->
    </view>

    <privacy ref="privacy"></privacy>
  </view>
</template>

<script>
import privacy from '@/components/privacy/index.vue'
import { baseImgUrl } from 'config.js'
export default {
  components: { privacy },
  data() {
    return {
      baseImgUrl: baseImgUrl,
      navOptions: {
        left: {
          icon: 'back',
          style: 'color:#c2c2c2;'
        },
        center: {
          title: '选择注册登录入口',
          style: 'color:#333;'
        },
        style: 'background: #F4F5F5;'
      }
    }
  },
  methods: {
    toPage(name) {
      // 直接跳登录
      if (name == "login") {
        uni.navigateTo({
          url: './' + name
        })
      } else { //跳转至对应的注册页面
        uni.navigateTo({
          url: './' + name + '/index'
        })
      }
    }
  },
  onLoad() {
    console.log("onLoad")
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({
        success: res => {
          console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
          console.log(res)
          if (res.needAuthorization) {
            this.$refs.privacy.showPopup()
          }
        },
        fail: () => { },
        complete: () => { },
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container_page {
  background: #f4f5f5;
  height: 100vh;

  .card {
    background: white;
    border-radius: 10rpx;
    margin: 24rpx;
    font-weight: 400;
    line-height: 36rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 80rpx;

    .header {
      .decorate {
        height: 350rpx;
        width: 440rpx;
        margin: 60rpx auto 94rpx;
      }
    }

    .main {
      .btn {
        color: white;
        line-height: 80rpx;
        border-radius: 40rpx;
        width: 500rpx;
        font-size: 26rpx;
        text-align: center;
        margin-bottom: 70rpx;

        &:nth-child(1) {
          background: #4e78e2;
        }

        &:nth-child(2) {
          background: #3f97db;
        }

        &:nth-child(3) {
          background: #30ad37;
        }

        &:nth-child(4) {
          background: #ad3089;
        }
      }
    }

    .footer {
      display: flex;
      color: #999;

      view {
        color: #335ac6;
      }
    }
  }
}
</style>
